<template>
    <div class="p_classify_page">
      <div class="common_form_search">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="分类名称">
            <el-input v-model="searchForm.name" placeholder="请输入分类名称" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="全部" clearable>
              <el-option label="显示" value="2" />
              <el-option label="隐藏" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
        <el-button size="small" class="add-btn" icon="el-icon-plus" @click="openAddDialog()">添加严选分类</el-button>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="70" align="center" />
          <el-table-column align="center" label="排序" width="80">
            <template slot-scope="scope">
              <span v-if="!$hasMethod('#sort')">{{ scope.row.sort }}</span>
              <el-input v-else v-model="scope.row.sort" oninput="value=value.replace(/[^\d]/g,'')" maxlength="9" @change="changeSort(scope.row.id, scope.row.sort)" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分类名称" align="center" />
          <el-table-column prop="title" label="标语" align="center" />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="$hasMethod('#enable')" class="pointer" :type="scope.row.status == 2 ? 'success' : 'danger'" @click="changeStatus(scope.row.id, scope.row.status)">{{ scope.row.status == 2 ? "显示" : "隐藏" }}</el-tag>
              <el-tag v-else :type="scope.row.status == 2 ? 'success' : 'danger'">{{ scope.row.status == 2 ? "显示" : "隐藏" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="openAddDialog(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="removeItem(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList" />
      </div>
      <!-- <add-dialog ref="addDialog" :edit-item="editItem" @getList="getList" /> -->
      <second-cate ref="secondCate" :edit-item="editItem" @getList="getList"></second-cate>
    </div>
  </template>
  
  <script>
  import customPage from '@/components/customPage'
  import addDialog from './add'
  import secondCate from './components/secondCate.vue'
  import { categoryList, setCategoryDel, setCategoryStatus, setCategorySort } from '@/api/xcx'
  export default {
    components: { customPage, addDialog,secondCate },
    data() {
      return {
        searchForm: {
          name: '',
          status: '',
          type:2
        },
        total: 0,
        tableData: [],
        editItem: null
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 删除
      removeItem(id) {
        this.$confirm('您确定要删除推广分类吗？', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          setCategoryDel(id).then(res => {
            this.getList(true)
          })
        }).catch(() => { })
      },
      // 显示/隐藏
      changeStatus(id, status) {
        let tip = ''
        let title = ''
        if (status === 2) {
          tip = '您确定要隐藏推广标签吗？'
          title = '隐藏'
        } else {
          tip = '您确定要显示推广标签吗？'
          title = '显示'
        }
        this.$confirm(tip, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          setCategoryStatus({
            id,
            status: status === 2 ? 1 : 2
          }).then(res => {
            this.getList(true)
          })
        }).catch(() => { })
      },
      // 更改排序
      changeSort(id, val) {
        setCategorySort({
          id: id,
          sort: val
        }).then(res => {
          this.getList(true)
        })
      },
      getList(flag) {
        // flag为true, 则不刷新表格
        const { page, pageSize } = this.$refs.customPage
        if (!flag) {
          this.tableData = []
        }
        categoryList({
          page,
          pageSize,
          ...this.searchForm,
        }).then(res => {
          this.tableData = res.data || []
          this.total = res.total
        })
      },
      search() {
        this.$refs.customPage.page = 1
        this.getList()
      },
      reset() {
        this.searchForm = {
          name: '',
          status: ''
        }
        this.$refs.customPage.page = 1
        this.getList()
      },
      openAddDialog(val) {
        this.editItem = val || null
        this.$refs.secondCate.dialogVisible = true
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>
  